<template>
	<page-meta :page-style="'overflow:'+(showFlag?'hidden':'visible')"></page-meta>
	<view class="c_container">
		<view class="c_header"></view>
		<template v-if="off===true">
			<view class="car_box">
				<image src="/static/images/blank/bacg.png" mode=""></image>
				<view class="topBack">
					<view class="img3">
						<image src="/static/images/blank/4341.png" mode=""></image>
						<view class="txt1">
							校园电子钱包
						</view>
					</view>
					<view class="tips1">
						您还未开通电子钱包，马上开立享受更多服务
					</view>
					<view class="box">
						<template v-if="userInfoList.length>0">
							<view v-if="is_open_kind==2" class="btns1" @click="toCreateUser">
								开通Ⅲ类户
							</view>
							<view v-if="is_open_kind==1" class="btns1" @click="toCreateOneCount">
								添加Ⅰ类户
							</view>
						</template>
						<template v-else>
							<view class="btns1" @click="toCreateUser">
								开通电子钱包
							</view>
							<view class="btns1" @click="show = true">
								其他方式
							</view>
						</template>
					</view>
				</view>
			</view>
			<template v-if="userInfoList.length==0">
				<view class="addTips2">
					<view class="one">
						1.电子钱包仅可在校内指定区域消费使用，可通过绑定银行卡充值、消费，电子钱包停止使用时，可通过“更多”功能销户。
					</view>
					<view class="two">
						<view class="">
							2.电子钱包由交通银行通过Ⅲ类账户 <image src="/static/images/blank/irker.png" mode="" @click="toExpanrs">
							</image>
							提供基本消费金融功能，开通电子钱包需绑定银行借记卡。<text class="seeBlank" @click="openBlank">
								支持银行名单。
							</text>
						</view>
					</view>
					<view class="one">
						3.如您已有交行Ⅰ类户，可直接添加使用
					</view>
				</view>
			</template>
		</template>
		<template v-if="off===false">
			<template v-if="userInfoList.length>0">
				<view class="big_box" v-for="(item,index) in userInfoList">
					<view class="pos_top">
						<view class="title">
							<view class="nb">
								<view class="img">
									<image src="/static/images/blank/4341.png" mode=""></image>
								</view>
								<view class="text">
									校园电子钱包
								</view>
							</view>
							<template v-if="item.accountType!=2">
								<view class="nb2" v-show="!item.contrlOff" @click="handOver(item,index)">
									更多内容
								</view>
								<view class="nb3" v-show="item.contrlOff" @click="handShanChu(item,index)">
									返回
								</view>
							</template>
						</view>
						<template v-if="!item.contrlOff">
							<view v-if="item.accountType==1" class="user">
								Ⅱ类卡账号
							</view>
							<view v-if="item.accountType==2" class="user">
								Ⅰ类卡账号
							</view>
							<view v-if="item.accountType==3" class="user">
								Ⅲ类户
							</view>
							<view class="number">
								{{item.cardNo}}
							</view>
							<template v-if="item.accountType!=2">
								<view class="tips">
									<view class="left">
										可用余额(元)
									</view>
									<view class="img2" v-show="!item.flag" @click="getSeeMoneny(item,index)">
										<image src="/static/images/blank/zhaeye.png" mode="">
										</image>
									</view>
									<view class="img2" v-show="item.flag" @click="getSeeMoneny2(item)">
										<image src="/static/images/blank/eyesp.png" mode=""></image>
									</view>
								</view>
								<view class="sum">
									<view class="see" v-show="!item.flag">
										****
									</view>
									<view class="see" v-show="item.flag">
										{{item.balance}}
									</view>
								</view>
							</template>
							<template v-if="item.accountType!=2">
								<view class="selecBtn">
									<view class="pp" @click="recharge(item)">
										充值
									</view>
									<view class="sp">
										|
									</view>
									<view class="pp" @click="takeCalllBack(item)">
										提回
									</view>
									<view class="sp">
										|
									</view>
									<view class="pp" @click="toStatement(item)">
										明细
									</view>
									<view class="sp" v-if="!item.isSign">
										|
									</view>
									<view v-if="!item.isSign" class="pp" @click="toQuickPayment(item)">
										签约
									</view>
									<view class="sp" v-if="item.isSign">
										|
									</view>
									<view v-if="item.isSign" class="pp" @click="addBindStu(item)">
										增绑
									</view>
								</view>
							</template>
							<template v-else>
								<view class="end_card">
									<view class="pp" @click="seeBindStudentInfo(item)">
										用户信息
									</view>
									<view class="sp">
										|
									</view>
									<view v-if="!item.isSign" class="pp" @click="toQuickPayment(item)">
										签约
									</view>
									<view v-if="item.isSign" class="pp" @click="addBindStu(item)">
										增绑
									</view>
									<view class="sp">
										|
									</view>
									<view class="pp" @click="deletOneCountCard(item)">
										解约
									</view>
								</view>
							</template>
						</template>
						<template v-if="item.contrlOff">
							<view class="haoNan">
								<view class="bindCoin" @click="getUserInfo(item)">
									<view class="tps">
										<image src="/static/images/blank/fanp.png" mode=""></image>
									</view>
									<view class="eps">
										账户信息
									</view>
								</view>
								<view class="aline">

								</view>
								<view class="bindCoin" @click="changeBindCard(item)">
									<view class="tps">
										<image src="/static/images/blank/fhk.png" mode=""></image>
									</view>
									<view class="eps">
										更换绑卡
									</view>
								</view>
								<view class="aline">

								</view>
								<view class="bindCoin" @click="deleteUser(item)">
									<view class="tps">
										<image src="/static/images/blank/lks.png" mode=""></image>
									</view>
									<view class="eps">
										账户销户
									</view>
								</view>
								<view class="aline">
								</view>
								<view class="bindCoin" @click="seeBindStudentInfo(item)">
									<view class="tps">
										<image src="/static/images/blank/dijfe.png" mode=""></image>
									</view>
									<view class="eps">
										用户信息
									</view>
								</view>
							</view>
						</template>
					</view>
					<image src="/static/images/blank/bacg.png" mode=""></image>
				</view>
			</template>
			<template v-if="is_open_kind==2">
				<view class="addBtnTwo">
					<view class="bus" @click="toCreateUser">
						添加Ⅲ类户
					</view>
					<!-- 	<view v-if="is_open_kind==1" class="oneCard" @click="toCreateOneCount">
					添加交行Ⅰ类户
				</view> -->
				</view>
				<view class="addTips" v-show="explain">
					<text>电子钱包使用说明：</text>
					<text>充值：从绑定银行卡向电子钱包转入资金</text>
					<text>提回：将电子钱包资金向绑定银行卡转出</text>
				</view>
			</template>
		</template>
		<view :class="off===true?'kdn2':'kdn'">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
		<uni-popup ref="popup4" background-color="#fff" @change="handlePrivite">
			<view class="popup-content">
				<view class="lps">
					交通银行、建设银行、工商银行、农业银行、邮 储银行、中国银行、招商银行、浦发银行、上海
					银行、上海农村商业银行、上海华瑞银行、东亚银行、大华银行、南洋商业银行、华侨永亨银行、花旗银行、江苏银行、南京银行、苏州银 行、江苏长江商业银行、江南农村商业银行、常
					熟农村商业银行、苏州农村商业银行、昆山农村商业银行、无锡农村商业银行、张家港农村商业银行、江阴农村商业银行、太仓农村商业银行、 江苏省农村信用社联合社、浙商银行、杭州银
					行、嘉兴银行、湖州银行、绍兴银行、金华银行、台州银行、温州银行、浙江稠州商业银行、浙江民泰商业银行、浙江泰 隆商业银行、宁波银 行、宁波东海银行、宁波通商银行、鄞州银行、
					徽商银行、安徽省农村信用社联合社
				</view>
				<view class="bts" @click="closePuop">
					我知道了
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" background-color="#fff" @change="handlePrivite">
			<view class="popup-content">
				<view class="liability">
					隐私政策
				</view>
				<view class="mainBox">
					<view class="contents">
						点击“同意”即视为你同意并授权申能达智能技术有限公司将你的姓名和身份证件号码共享给“交通银行”服务提供者，你的姓名和身份证件号码将被服务提供者“交通银行”收集、存储和使用，目的是为了向您提供交通银行电子帐户相关服务。除上以外申能达智能技术有限公司不会将您的个人信息另作它用。
					</view>
					<view class="buClick">
						<view :class="sign?'crcle':'crcle2'" @click="myArgee">

						</view>
						<view class="boxRight">
							<view class="top1">
								本人同意第一、二项协议和规则并承诺第三项属实
							</view>
							<view class="top2">
								<view class="one">
									1.
								</view>
								<view class="two">
									<view class="three" @click="seeAgreement(1)">
										《个人人民币银行结算账户管理协议》
									</view>
									<view class="three" @click="seeAgreement(3)">
										《交通银行太平洋个人借记卡领用合约》
									</view>
									<view class="three" @click="seeAgreement(0)">
										《交通银行太平洋借记卡章程》
									</view>
								</view>
							</view>
							<view class="top1">
								2.本人充分了解并清楚知晓出租、出借、出售、购买账户的相关法律责任和惩戒措施，承诺依法依规开立和使用本人账户。
							</view>
							<view class="top3" @click="seeAgreement(2)">
								查看详细解释
							</view>
							<view class="top4" style="word-wrap: break-word;">
								3.本人承诺为非美国个人。
							</view>
							<view class="top3" @click="seeAgreement(5)">
								查看详细解释
							</view>
							<view class="top4">
								4.本人承诺为中国税收居民，且非其他税收管辖区居民。
							</view>
							<view class="top3" @click="seeAgreement(4)">
								查看详细解释
							</view>
						</view>

					</view>
				</view>

				<view class="realBtn">
					<view class="reaLeft" @click="cancel">
						取消
					</view>
					<view class="realRight" @click="myRequire">
						我同意
					</view>
				</view>
			</view>
		</uni-popup>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" @change="handlePrivite">
			<view style="min-height: 400rpx;padding: 30rpx;box-sizing: border-box;">
				<view class="navBtn">
					<text @click="close">取消</text>
					<text style="color:#7ab3fd;" @click="groupChange">确定</text>
				</view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in radiolist1" :key="index">{{item}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		getMoneny,
		idCardOCR,
		oneCountDelete
	} from '../../common/api/blank.js';
	import {
		_showLoading,
		_showToast,
		_showModal
	} from '../../common/js/util.js';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				showFlag: false,
				visible: true,
				indicatorStyle: `height: 50px;`,
				value: [0],
				index: 0, //默认选中
				radiolist1: ['添加I类户'],
				show: false,
				userInfo: {
					orgId: "",
					empId: "",
					name: ""
				},
				userInfoList: [],
				off: "",
				sign: true,
				serNum: 0,
				timers: null,
				lastCoc: "",
				explain: true,
				is_open_kind: "2",
			}
		},
		onShow() {
			this.getCardList()
		},
		methods: {
			handlePrivite(e) {
				this.showFlag = e.show
			},
			bindChange: function(e) {
				this.index = e.detail.value[0]
				this.value = e.detail.value
			},
			groupChange() {
				this.show = false
				switch (this.radiolist1[this.index]) {
					case '添加I类户':
						this.is_open_kind = 1
						this.$refs.popup.open("center")
						break;
					default:
						break;
				}
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			//其他方式选择
			otherWays() {
				this.show = true
			},
			//获取卡列表
			async getCardList() {
				uni.showLoading({
					title: "检测账户中",
					mask: true
				})
				let s_userId = uni.getStorageSync("s_userId");
				const res = await getTwoUserList({
					userId: s_userId
				})
				// console.log(res)
				try {
					if (res.code == 0) {
						if (res.data.length > 0) {
							uni.hideLoading()
							this.off = false
							this.userInfoList = res.data
							this.userInfoList.forEach((item, index) => {
								item.flag = false
								item.contrlOff = false
							})
							if (this.userInfoList[0].accountType == 2) {
								this.is_open_kind = '1'
							} else {
								this.is_open_kind = '2'
							}
						} else {
							this.is_open_kind = '2'
							uni.hideLoading()
							this.off = true
						}
					} else {
						this.is_open_kind = '2'
						uni.hideLoading()
						// _showToast(res.msg)
					}
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
					_showModal("温馨提示!", e)
				}
				// console.log(res)

			},
			//解约
			deletOneCountCard(item) {
				uni.showModal({
					title: '提示',
					content: '是否确定解约此账户？',
					success: (res) => {
						if (res.confirm) {
							oneCountDelete({
								batId: item.batId,
								orgId: item.orgId
							}).then((res) => {
								if (res.code == 0) {
									this.getCardList()
								} else {
									_showToast(res.msg)
								}
							}).catch((err) => {
								_showToast(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			addBindStu(item) {
				uni.navigateTo({
					url: `/pageBlank/bindStudent/bindStudent?batId=${item.batId}&orgId=${item.orgId}&phone=${item.phone}`
				})
			},
			seeBindStudentInfo(item) {
				uni.navigateTo({
					url: `/pageBlank/components/bindStudentInfo?batId=${item.batId}`
				})
			},
			closePuop() {
				this.$refs.popup4.close()
			},
			openBlank() {
				this.$refs.popup4.open("center")
			},
			toExpanrs() {
				uni.navigateTo({
					url: "/pageBlank/components/interpretation"
				})
			},
			seeAgreement(val) {
				switch (val) {
					case 0:
						uni.navigateTo({
							url: "/pageBlank/components/agreement?url=a8o9i-6k65z.html&title=交通银行太平洋借记卡章程"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pageBlank/components/agreement?url=ageut-2qgj1.html&title=个人人民币银行结算账户管理协议"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pageBlank/components/agreement?url=avsus-ux45g.html&title=买卖账户法律责任及惩戒措施相关条款"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pageBlank/components/agreement?url=a46xp-nrrkg.html&title=交通银行太平洋个人借记卡领用合约"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pageBlank/components/agreement?url=a0tme-eydth.html&title=涉税声明"
						})
						break;
					case 5:
						uni.navigateTo({
							url: "/pageBlank/components/agreement?url=jdsldlsd.html&title=涉税声明"
						})
						break;
					default:
						console.log()
				}
			},
			//账户销户
			deleteUser(item) {
				uni.navigateTo({
					url: `/pageBlank/components/userDelete?batId=${item.batId}&phone=${item.phone}&orgId=${item.orgId}`
				})
			},
			//更换绑卡
			changeBindCard(item) {
				// console.log(item)
				uni.navigateTo({
					url: `/pageBlank/components/changBindCard?batId=${item.batId}&phone=${item.phone}&orgId=${item.orgId}&idName=${item.idName}&idNo=${item.idCard}`
				})
			},
			//账户信息
			getUserInfo(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pageBlank/components/userInfo?batId=${item.batId}&orgId=${item.orgId}`
				})
			},
			handOver(item, index) {
				item.contrlOff = true
				// console.log(item)
				this.explain = false
				this.$set(this.userInfoList, index, item)
			},
			handShanChu(item, index) {
				item.contrlOff = false
				this.explain = true
				this.$set(this.userInfoList, index, item)
				// console.log(item)
			},
			myRequire() {
				if (!this.sign) {
					this.$refs.popup.close()
					this.sign = true
					uni.navigateTo({
						url: `/pageBlank/components/selectSchool?kind=${this.is_open_kind}`
					})
				} else {
					_showToast("未同意协议,无法开户")
				}
			},
			cancel() {
				this.sign = true
				this.$refs.popup.close()
			},
			myArgee() {
				this.sign = !this.sign
			},
			toStatement(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pageBlank/statement/statement?batId=${item.batId}&phone=${item.phone}&orgId=${item.orgId}`
				})
			},
			toQuickPayment(item) {
				uni.navigateTo({
					url: `/pageBlank/quickPayment/quickPayment?batId=${item.batId}&orgId=${item.orgId}`
				})
			},
			takeCalllBack(item) {
				if (item.flag) {
					item.flag = false
				}
				uni.navigateTo({
					url: `/pageBlank/callBack/callBack?batId=${item.batId}&phone=${item.phone}&orgId=${item.orgId}`
				})
			},
			getSeeMoneny2(item) {
				item.flag = !item.flag
			},
			//查看余额
			async getSeeMoneny(item, index) {
				item.flag = !item.flag
				const result = await getMoneny({
					batId: item.batId,
					orgId: item.orgId
				})
				console.log(result)
				if (result.code == 0) {
					result.data.flag = true
					this.$set(this.userInfoList, index, result.data)
				} else {
					_showToast(result.msg)
				}
			},
			recharge(item) {
				uni.navigateTo({
					url: `/pageBlank/recharge/recharge?batId=${item.batId}&phone=${item.phone}&orgId=${item.orgId}`
				})
			},
			//开通Ⅲ类户
			toCreateUser() {
				this.is_open_kind = '2'
				this.$refs.popup.open("center")
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep ::-webkit-scrollbar {
		// 滚动条整体样式
		display: block;
		width: 10rpx !important;
		height: 10rpx !important;
		-webkit-appearance: auto !important;
		background: transparent;
		overflow: auto !important;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		// 滚动条里面小方块
		border-radius: 10rpx !important;
		box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #519FF4 !important;
	}

	::v-deep ::-webkit-scrollbar-track {
		// 滚动条
		border-radius: 10rpx !important;
		box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #f1f1f1 !important;
	}

	.navBtn {
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.picker-view {
		width: 100%;
		height: 400rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.kdn {
		padding: 86rpx 0rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		>image {
			width: 34rpx;
			height: 33rpx;
		}

		.subx {
			margin-left: 8rpx;
			height: 34rpx;
			font-size: 24rpx;

			font-weight: 400;
			color: #003A79;
			line-height: 34rpx;
		}
	}

	.kdn2 {
		position: fixed;
		bottom: 86rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		>image {
			width: 34rpx;
			height: 33rpx;
		}

		.subx {
			margin-left: 8rpx;
			height: 34rpx;
			font-size: 24rpx;

			font-weight: 400;
			color: #003A79;
			line-height: 34rpx;
		}
	}

	.popup-content {
		width: 622rpx;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		background: #FFFFFF;
		border-radius: 12rpx;
		opacity: 1;
		box-sizing: border-box;
		padding-top: 29rpx;

		.lps {
			margin: 0 48rpx;
			margin-top: 40rpx;
			font-size: 30rpx;
			overflow: hidden;
			overflow-y: scroll;
			color: #000000;
			flex: 1;
		}

		.bts {
			margin-top: 78rpx;
			background-color: #3478F5;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			border-bottom-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;
		}

		.mainBox {
			flex: 1;
			overflow: hidden;
			overflow-y: scroll;
		}

		.liability {
			text-align: center;
			height: 49rpx;
			font-size: 36rpx;

			font-weight: 500;
			color: #000000;
			line-height: 49rpx;
			margin-bottom: 18rpx;
		}

		.contents {
			font-size: 28rpx;

			font-weight: 300;
			color: #000000;
			line-height: 50rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
		}

		.realBtn {
			display: flex;
			height: 109rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #ccc;

			.reaLeft {
				width: 50%;
				height: 109rpx;
				opacity: 1;
				font-size: 36rpx;

				font-weight: normal;
				color: #000000;
				line-height: 109rpx;
				text-align: center;
				box-sizing: border-box;
				border-right: 1rpx solid #ccc;
			}

			.realRight {
				text-align: center;
				width: 50%;
				height: 109rpx;
				font-size: 36rpx;
				font-weight: normal;
				color: #519FF4;
				line-height: 109rpx;
			}
		}

		.buClick {
			display: flex;
			margin-top: 37rpx;
			margin-bottom: 29rpx;
			margin-left: 44rpx;
			margin-right: 44rpx;


			.boxRight {
				flex: 1;

				.top1 {
					font-size: 28rpx;
					font-weight: 300;
					color: #666;
				}

				.top2 {
					display: flex;

					.one {
						font-size: 28rpx;
						font-weight: 300;
						color: #666;
					}

					.two {
						.three {
							font-size: 26rpx;
							font-weight: 300;
							color: #519FF4;
						}
					}
				}

				.top3 {
					font-size: 28rpx;
					font-weight: 300;
					color: #519FF4;
				}

				.top4 {
					display: flex;
					font-size: 28rpx;
					font-weight: 300;
					color: #666;
				}
			}



			.crcle2 {
				margin-top: 5rpx;
				box-sizing: border-box;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				opacity: 1;
				border: 8rpx solid #3478F5;
				margin-right: 8rpx;
			}

			.crcle {
				margin-top: 5rpx;
				width: 26rpx;
				height: 26rpx;
				opacity: 1;
				border-radius: 50%;
				border: 1rpx solid #3478F5;
				margin-right: 8rpx;
			}


		}
	}

	.addTips2 {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 555rpx;
		margin: 0 48rpx;

		.one {
			font-size: 26rpx;
			font-weight: 300;
			color: #475263;
			line-height: 38rpx;
		}

		.two {
			display: flex;
			font-size: 26rpx;
			font-weight: 300;
			color: #475263;

			image {
				margin: 0rpx 10rpx;
				width: 22rpx;
				height: 22rpx;
			}

			.seeBlank {
				height: 35rpx;
				font-size: 26rpx;
				font-weight: 300;
				color: #519FF4;
			}
		}
	}

	.addBtnTwo {
		height: 76rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 26rpx;

		.bus {
			text-align: center;
			line-height: 72rpx;
			padding: 0rpx 30rpx;
			height: 72rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			border: 2rpx solid #519FF4;
			font-size: 28rpx;
			font-weight: 300;
			color: #519FF4;
		}

		.oneCard {
			text-align: center;
			line-height: 72rpx;
			padding: 0rpx 30rpx;
			height: 72rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			border: 2rpx solid #519FF4;
			font-size: 28rpx;
			font-weight: 300;
			color: #519FF4;
		}
	}

	.addTips {
		display: flex;
		flex-direction: column;

		text {
			margin-left: 49rpx;
			font-size: 26rpx;
			font-weight: 300;
			color: #475263;
		}
	}

	.btn {
		margin: 0 auto;
		width: 154rpx;
		text-align: center;
		height: 54rpx;
		background: #2D57F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 300;
		color: #FFFFFF;
		line-height: 54rpx;
	}

	.tips2 {
		margin: 88rpx 86rpx 122rpx 86rpx;
		height: 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.c_container {
		height: auto;
		position: relative;
	}

	.c_header {
		width: 100vw;
		height: 220rpx;
		background-image: url('');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.car_box {
		display: flex;
		flex-direction: column;
		width: 92%;
		position: absolute;
		top: 150rpx;
		left: 4%;
		height: 374rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;

		>image {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			height: 100%;
		}

		.topBack {
			width: 100%;
			position: absolute;
			z-index: 6;

			.img3 {
				display: flex;
				align-items: center;
				margin-top: 25rpx;
				margin-left: 30rpx;

				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 8rpx;
				}

				.txt1 {
					height: 37rpx;
					font-size: 28rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
				}
			}

			.tips1 {
				width: 100%;
				text-align: center;
				height: 40rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				margin-top: 86rpx;
				margin-bottom: 86rpx;

			}

			.box {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.btns1 {
					padding: 10rpx 30rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					border-radius: 8rpx;
					opacity: 1;
					border: 2rpx solid #FFFFFF;
					font-size: 28rpx;
					font-weight: 300;
					color: #FFFFFF;
				}
			}

		}
	}

	.big_box {
		width: 676rpx;
		height: 374rpx;
		margin: 0 auto;
		position: relative;
		top: -70rpx;
		box-sizing: border-box;
		// padding-left: 30rpx;
		padding-top: 25rpx;
		margin-bottom: 26rpx;

		>image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			z-index: 4;
		}

		.pos_top {
			width: 100%;
			position: absolute;
			z-index: 5;
			box-sizing: border-box;

			.haoNan {
				width: 100%;
				display: flex;
				margin-top: 86rpx;
				justify-content: center;
				align-items: center;

				.aline {
					width: 2rpx;
					height: 32rpx;
					background-color: #fff;
					margin: 0 23rpx;
				}

				.bindCoin {
					display: flex;
					flex-direction: column;
					align-items: center;

					.tps {
						width: 57rpx;
						height: 57rpx;
						margin-bottom: 15rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.eps {
						height: 37rpx;
						font-size: 28rpx;
						font-weight: 300;
						color: #FFFFFF;
						line-height: 37rpx;
					}
				}
			}

			.end_card {
				margin-top: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.pp {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
					margin-left: 46rpx;
					margin-right: 46rpx;
				}

				.sp {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
				}
			}

			.selecBtn {
				width: 100%;
				height: 37rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;

				.pp {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
					margin-left: 46rpx;
					margin-right: 46rpx;
				}

				.gg {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
				}

				.pp:first-child {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
					margin-left: 0rpx;
				}

				.pp:last-child {
					margin-right: 0rpx;
				}

				.sp {
					height: 37rpx;
					font-size: 30rpx;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 37rpx;
				}
			}

			.user {
				box-sizing: border-box;
				padding-left: 30rpx;
				height: 32rpx;
				font-size: 26rpx;

				font-weight: 300;
				color: #FFFFFF;
				line-height: 32rpx;
				margin-bottom: 6rpx;

			}

			.number {
				box-sizing: border-box;
				padding-left: 30rpx;
				height: 40rpx;
				font-size: 36rpx;

				font-weight: 300;
				color: #FFFFFF;
				line-height: 40rpx;
				margin-bottom: 21rpx;
			}

			.sum {
				box-sizing: border-box;
				padding-left: 30rpx;
				height: 66rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 66rpx;

				.see {
					height: 66rpx;
					line-height: 66rpx;
				}
			}

			.tips {
				box-sizing: border-box;
				padding-left: 30rpx;
				margin-bottom: 6rpx;
				display: flex;
				align-items: center;

				.left {
					height: 32rpx;
					font-size: 26rpx;

					font-weight: 300;
					color: #FFFFFF;
					line-height: 32rpx;
				}

				.img2 {
					margin-left: 14rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.title {
				box-sizing: border-box;
				padding-left: 30rpx;
				height: 34rpx;
				display: flex;
				margin-bottom: 23rpx;
				justify-content: space-between;
				align-items: center;

				.nb {
					display: flex;
					align-items: center;

					.img {
						image {
							width: 34rpx;
							height: 34rpx;

						}
					}

					.text {
						margin-left: 8rpx;
						height: 34rpx;
						font-size: 26rpx;

						font-weight: 300;
						color: #FFFFFF;
						line-height: 34rpx;
					}

				}

				.nb2 {
					margin-right: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;

					font-weight: 300;
					color: #FFFFFF;
				}

				.nb3 {
					margin-right: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;

					font-weight: 300;
					color: #FFFFFF;
				}

			}
		}
	}
</style>